<template>
	<view>
		<z-paging ref="addresPaging" v-model="addresList" @query="queryList">
			<template #top>
				<app-header color="#fff" :title="headerTitle" />
			</template>
			<view class="u-demo-block__content">
				<u-tabs :list="list1" @click="click" :current="current">
				</u-tabs>
			</view>
			<view class="addres-list comm-container" v-if="dizhiType=='国内地址'">
				<view class="addres-item" v-for="(item,index) in addresList" :key="index">
					<view class="info" @click="selectAddress(item)">
						<text class="info-name">
							{{item.name}}
						</text>
						<text class="info-phone">
							{{item.phone}}
						</text>
						<text class="info-addres">
							{{item.addressDetail}}
						</text>
					</view>
					<view class="bottom">
						<view class="bottom-item"
							@click="nextLink(`/subpages/views/address/form?id=${item.id}&dz=${item.isGn}`)">
							<image class="img" src="../../static/images/image-05.png" mode="widthFix" />
							<text>编辑</text>
						</view>
						<view class="bottom-item" @click="delAddress(item.id)">
							<image class="img" src="../../static/images/image-06.png" mode="widthFix" />
							<text>删除</text>
						</view>
					</view>
				</view>
			</view>
			<view class="addres-list comm-container" v-else>
				<view class="addres-item" v-for="(item,index) in addresList" :key="index">
					<view class="info" @click="selectAddress(item)">
						<text class="info-name">
							{{item.name}}
						</text>
						<text class="info-phone">
							{{item.phone}}
						</text>
						<text class="info-addres">
							{{item.addressDetail}}
						</text>
					</view>
					<view class="bottom">
						<view class="bottom-item"
							@click="nextLink(`/subpages/views/address/form?id=${item.id}&dz=${item.isGn}`)">
							<image class="img" src="../../static/images/image-05.png" mode="widthFix" />
							<text>编辑</text>
						</view>
						<view class="bottom-item" @click="delAddress(item.id)">
							<image class="img" src="../../static/images/image-06.png" mode="widthFix" />
							<text>删除</text>
						</view>
					</view>
				</view>
			</view>
			<template #bottom>
				<view class="footer-btn" v-if="dizhiType=='国内地址'">
					<u-button type="success" shape="circle" text="新增地址" style="width: 100%;" color="#2979FF"
						@click="nextLink('/subpages/views/address/form?dz=1')"></u-button>
				</view>
				<view class="footer-btn" v-else>
					<u-button type="success" shape="circle" text="新增地址" style="width: 100%;" color="#2979FF"
						@click="nextLink('/subpages/views/address/form?dz=2')"></u-button>
				</view>
			</template>

		</z-paging>
	</view>
</template>

<script>
	import AppHeader from "@/subpages/components/header.vue"
	import {
		getaddressList,
		delAddressList
	} from "@/api/logistics.js"
	export default {
		components: {
			AppHeader
		},
		data() {
			return {
				type: "",
				headerTitle: "地址管理",
				addresList: [],
				gjaddresList: [],
				dizhiType: "国内地址",
				pageSize: "",
				pageNo: "",
				isGn: "1",
				dz: "1",
				list1: [{
					name: '国内地址',
				}, {
					name: '国际地址',
				}],
				current: 0
			}
		},
		onLoad(options) {
			if (options.type) {
				this.type = options.type
			}
			if (options.dz) {
				this.dz = options.dz
				if (this.dz == '1') {
					this.current = 0
				} else {
					this.current = 1
				}
				this.isGn = options.dz
			}
		},
		methods: {
			click(item) {
				if (item.name == "国内地址") {
					this.dizhiType = "国内地址"
					this.isGn = "1"
				} else {
					this.dizhiType = "国外地址"
					this.isGn = "2"
				}
				// this.$refs.addresPaging.clear();
				this.$refs.addresPaging.reload()

			},
			selectAddress(item) {
				if (this.type) {
					const selectedData = {
						name: item.name,
						phone: item.phone,
						addressDetail: item.addressDetail,
						city: item.city,
						countryCode: item.countryCode,
						postCode: item.postCode,

						// name: "陈某",
						// phone: "17600371879",
						// addressDetail: "北京市朝阳区西直门",
					};
					const eventChannel = this.getOpenerEventChannel();
					eventChannel.emit('Selected', selectedData);
					uni.navigateBack();
				}


			},
			queryList(pageNo, pageSize) {
				this.pageNo = pageNo;
				this.pageSize = pageSize;
				console.log("====================================================")
				getaddressList({
					pageNum: pageNo,
					pageSize,
					isGn: this.isGn,
				}).then(res => {
					if (res.code == 200) {
						this.$refs.addresPaging.complete(res.rows);
					} else {
						this.$refs.addresPaging.complete(false)
					}
				})



			},
			delAddress(id) {
				delAddressList(id).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '删除成功',
							duration: 1000,
							icon: "success"
						});
						//重新刷新地址
						this.$refs.addresPaging.reload()
					}
				})

			},
			nextLink(path) {
				uni.navigateTo({
					url: path,

				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.addres-list {
		.addres-item {
			box-shadow: 0rpx 7rpx 10rpx 1rpx rgba(0, 0, 0, 0.16);
			border-radius: 20rpx;
			background: #fff;
			margin-bottom: 20rpx;
			padding: 40rpx 20rpx;

			.info {
				border-bottom: 1px solid #EDEDED;
				padding-bottom: 15rpx;

				.info-name {
					font-size: 30rpx;
				}

				.info-phone {
					font-size: 30rpx;
					margin-left: 20rpx;
				}

				.info-addres {
					display: block;
					font-size: 28rpx;
					color: #222222;
					margin-top: 20rpx;
				}
			}

			.bottom {
				padding-top: 10rpx;
				text-align: right;

				.bottom-item {
					display: inline-block;
					font-size: 26rpx;
					margin-left: 20rpx;

					.img {
						width: 20rpx;
						margin-right: 10rpx;
					}
				}
			}
		}
	}

	.footer-btn {
		background: #fff;
		padding: 20rpx;
	}
</style>